<template>
  <el-dialog
    class="user-dialog"
    v-model="visible"
    width="500"
    :close-on-click-modal="false"
    draggable
    append-to-body>
    <UserPanel :user="user || info"></UserPanel>
    <slot></slot>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  user: {
    type: Object,
    default: () => {}
  }
})
watch(() => props.user, (newVal) => {
  console.log('props.user 发生变化，目前文件是user-dialog:', newVal)
  console.trace('props.user 调用栈')
}, { immediate: true })
const visible = ref(false)

const info = ref({})
watch(info, (newVal) => {
  console.log('info 发生变化:', newVal)
}, { immediate: true })

defineExpose({
  open: (data) => {
    console.log('open函数传入的数据:', data)
    visible.value = true
    info.value = data
  }
})
</script>

<style lang="scss" scoped>
.user-dialog {
}
</style>
